<template>
  <a-upload
    v-model:file-list="fileList"
    list-type="picture-card"
    accept="image/*"
    class="avatar-uploader"
    :class="{ 'has-image-upload': imageUrl }"
    :show-upload-list="false"
    :customRequest="customRequest"
  >
    <div class="upload-box">
      <img v-if="imageUrl" :src="imageUrl" crossorigin="anonymous" />
      <div v-else>
        <PlusOutlined style="color: #bfc5c9; font-size: 28px"></PlusOutlined>
        <div class="ant-upload-text">点击上传</div>
      </div>
    </div>
  </a-upload>
</template>

<script setup>
import { postFileUpload } from "@/api/file";
const emits = defineEmits(['update:imageUrl', 'update:imageThumbUrl']);
defineProps({
  imageUrl: {
    default: '',
    type: String,
  },
  imageThumbUrl: {
    default: '',
    type: String,
  },
});
const fileList = ref([]);

const customRequest = options => {
  const formData = new FormData();
  formData.append('file', options.file);
  postFileUpload(formData)
    .then(res => {
      console.log('res.data',res.data);
      emits('update:imageUrl', res.data?.accessUrl);
      // emits('update:imageThumbUrl', res.data?.thUrl);
      options.onSuccess();
    })
    .catch(() => {
      options.onError();
    });
};
</script>

<style lang="less" scoped>
:deep(.ant-upload-select-picture-card) {
  position: relative;
  background-color: #f5f8fb;
  border: 1px solid #dfe5e8;
  .ant-upload-text {
    font-size: 14px;
    font-weight: 400;
    color: #aeb0b4;
    line-height: 20px;
  }
}
:deep(.ant-upload.ant-upload-select-picture-card) {
  width: 160px;
  height: 107px;
}
:deep(.avatar-uploader > .ant-upload) {
  width: 160px;
  height: 107px;
}
.has-image-upload {
  :deep(.upload-box) {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 4px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
    }
    &:hover {
      &::after {
        content: '更换封面';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: rgba(0, 0, 0, 0.6);
      }
    }
  }
}

:deep(.ant-upload.ant-upload-select-picture-card:hover) {
  border: 1px solid #dfe5e8;
}
</style>
